<template>
	<div id="total">
		<div class="food-item" v-for="(item,index) in restaurants.items" @click="gotoRestaurant">
			<div class="food-item-one">
				<!--				<img :src=bussiness[1].img_path>-->
				<img  src="../../assets/img/home/shop/business8.png">
				<div class="food-info">
					<span>{{item.restaurant.name}}</span>
					<span>{{item.restaurant.rating==0?"暂无评":item.restaurant.rating}}分
						月售{{item.restaurant.recent_order_num}}单
						<div style="background-color: #0af; color: #FFFFFF;border-radius: 2px; font-size: 11px;">蜂鸟专送
						</div>
					</span>
					<div>
						<div>
							<span>{{item.restaurant.float_minimum_order_amount}}¥起送</span>|<span>{{item.restaurant.piecewise_agent_fee.description}}</span>
						</div>
						<div>
							<span>{{(item.restaurant.distance/1000).toFixed(1)}}km</span>|<span>{{item.restaurant.order_lead_time}}min</span>
						</div>
					</div>
				</div>
			</div>
			<div class="food-item-two">
				<span style="color: rgb(102, 102, 102);border-color: rgb(221, 221, 221);border: .266667vw solid #ddd; width: 13vw; font-size: 10px;text-align: center;">{{item.restaurant.flavors[0].name}}</span>
				<div class="discount-tol" v-for="(item,i) in item?.restaurant?.activities">
					<div class="discount"><span
							:class="{'jian':item.icon_name=='减','pei':item.icon_name=='配','te':item.icon_name=='特','shou':item.icon_name=='首','zhe':item.icon_name=='折','zeng':item.icon_name=='赠'}">{{item.icon_name||""}}</span><span>{{item.description||""}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="height: 8vh;background-color:#fff;"></div>
</template>

<script>
	import restaurants from '../../data/json/xiaoliangzuigao.json'
	//console.log(restaurants)
	export default {
		name: "Xiao-liang-zui-gao",
		data() {
			return {
				restaurants,
				bussiness:{}
			}
		},
		methods: {
			gotoRestaurant(){
				//跳转到上一次浏览的页面  this.$router.go(-1)
				// this.$router.go(-1)
				//指定跳转的地址 this.$router.replace('/menu')
				this.$router.replace('/reataurants')
				//指定跳转的路由的名字下 this.$router.replace({name:'menu'})
				// this.$router.replace({name:'menu'})
				//通过push进行跳转
				// this.$router.push('/menu')
			}
		},
		mounted:function (){
			// this.$axios({
			// 	method: "get",
			// 	url:'/gethomeshop'
			// }).then((result) => {
			// 	console.log(result.data)
			// 	this.bussiness=result.data
			// })
		}
	}
</script>

<style scoped>
	#total {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.te {
		background-color: rgb(241, 136, 79);
	}

	.jian {
		background-color: rgb(240, 115, 115);
	}

	.shou {
		background-color: rgb(112, 188, 70);
	}

	.zhe {
		background-color: rgb(60, 199, 145);
	}

	.zeng {
		background-color: rgb(60, 199, 145);
	}
	.pei{
		background-color: rgb(112, 188, 70);
	}

	.food-item {
		width: 92vw;
		/*height: 25vh; */
		display: flex;
		flex-flow: column nowrap;
		border-radius: 8px;
		background-color: #FFFFFF;
		margin: 1vh 2vw;
		padding: 4vw 0;
		border-bottom: .133333vw solid #eee;
		border-top: .133333vw solid #eee;
	}

	.food-item-one {
		display: flex;
		padding: 0 2.666667vw;
	}

	.food-item-one>div {
		flex: 1;
		display: flex;
		flex-flow: column nowrap;
	}

	.food-item-one>img {
		width: 12vh;
		height: 12vh;
		padding-right: 2vw;
	}

	.food-info {
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}

	.food-info>span:nth-child(1) {
		display: flex;
		margin: 0;
		padding: 0;
		color: #333;
		font-weight: 700;
		font-size: 16px;
		overflow: hidden;
	}

	.food-info>span:nth-child(2) {
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		color: #666;
		list-style: none;
		font-size: 12px;
		line-height: normal;
	}

	.food-info>div {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #666;
	}

	.food-item-two {
		padding-left: 25vw;
		display: flex;
		flex-flow: column;
		margin-top: 1vh;
	}

	.discount-tol {
		display: flex;
		flex-flow: column;
	}

	.discount {
		display: flex;
		flex-flow: row;
		align-items: flex-start;
		padding-top: 1vh;
	}

	.discount>span:nth-child(1) {
		color: #FFF;
		display: inline;
		font-size: 12px;
		line-height: 12px;
	}

	.discount>span:nth-child(2) {
		color: #666;
		font-size: 12px;
		line-height: 12px;

		display: inline;
		width: 45vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
